<template>
<div class="Demo">
    <!-- 提示 -->
    <var-button type="primary" block @click="show = !show">Snackbar 消息条</var-button>
    <var-snackbar v-model:show="show" :vertical="true" position="bottom">
        这是一个消息条！！
        <template #action>
            <var-button type="primary" @click="show = !show">关闭</var-button>
        </template>
    </var-snackbar>

    <!-- 国际化 -->
    <var-button type="info" block @click="change('en-US')">切换成英文</var-button>
    <var-button type="info" block @click="change('zh-CN')">切换成中文</var-button>
    {{pack.lang}} - {{pack.desc}} - {{pack.nav?.home}} - {{pack.nav?.list}}

    <!-- 图标 -->
    <div class="icon-bar">
        <var-icon name="checkbox-marked-circle" />
        <var-icon name="close-circle-outline" />
        <var-icon name="angle-acute" />
        <svg style="width:20px;height:20px" viewBox="0 0 20 20">
            <path fill="currentColor" d="M20,19H4.09L14.18,4.43L15.82,5.57L11.28,12.13C12.89,12.96 14,14.62 14,16.54C14,16.7 14,16.85 13.97,17H20V19M7.91,17H11.96C12,16.85 12,16.7 12,16.54C12,15.28 11.24,14.22 10.14,13.78L7.91,17Z" />
        </svg>
    </div>

</div>
</template>

<script>
import api from '@/api/news.js'
import { Locale } from '@varlet/ui'
// import LHeader from '@/components/layout/LHeader.vue'

export default {
    name: 'Demo',
    components: {},
    data() {
        return {
            show: false,
            pack: {}
        }
    },
    methods: {
        change(lang) {
            Locale.use(lang)
            console.log('测试', Locale)
        },
        viewDetail(item) {
            //this.$router.push({path:'/cityCaseDetail/'+ item.id});
        }
    },
    mounted() {
        this.pack = Locale.pack
    }
};
</script>

<style lang="scss" scoped>
.Demo {

    // margin-top:$l-header-height;
    .var-button {
        margin-bottom: 10px;
    }
}
</style>
